<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <!-- Latest compiled and minified CSS & JS -->
    <link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <script src="vuex.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
</head>
<body>
<div id="hd">
    <phone></phone>
    <total></total>
</div>
<script type="text/x-template" id="phone">
    <div class="container">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>价格小计</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="v in goods">
                <td>{{v.name}}</td>
                <td>{{v.price}}</td>
                <td>{{v.num}}</td>
                <td>{{v.sum}}</td>
                <td><button @click="del(v.id)">删除</button></td>
            </tr>
            </tbody>
        </table>
    </div>
</script>
<script type="text/x-template" id="price">
    <div class="container">
        <div class="alert alert-success">
            <strong>总计：{{price}}</strong>
        </div>
    </div>
</script>
<script>
    let total={
        template:'#price',
        computed:{
            price(){
                return this.$store.getters.price;
            }
        }
    }
    let phone={
        template:'#phone',
        computed:{
            goods(){
                return this.$store.getters.goods;
            },

        },
        methods:{
            del(id){
                this.$store.commit('del',{id:id});
            }
        }
    }
    const cartModule={
        state:{
            goods:[]
        },
        getters:{
            goods(state){
                let goods=state.goods;
                goods.forEach(v=>{
                    v.sum=v.num*v.price;
                })
                return goods;
            },
            price(state){
                var price=0;
                state.goods.forEach(v=>{
                    price+=v.num*v.price;
                })
                return price;
            }
        },
        mutations:{
            del(state,param){
                let k=0;
                for(let i=0;i<state.goods.length;i++){
                    if(state.goods[i].id==param.id){
                        k=i;
                    }
                }
                state.goods.splice(k,1);
            }
        },
        actions:{
            loadGoods(store){
                axios.get('data.php').then(function(response){
                    store.state.goods=response.data;
                })
            }
        }
    }
    let store=new Vuex.Store({
        cart:cartModule
    })
    var app=new Vue({
        el:'#hd',
        data:{

        },
        components:{
            phone,total
        },
        store,
        mounted(){
            this.$store.dispatch('loadGoods')
        }
    })
</script>
</body>
</html>